<template>
	<div id="indexAll">
		<div>
			<div id="left">
				<div id="indexNav">
					<router-link :class="currentIndex==1?'navSon navSonSelect':'navSon'" to="/index/indexRecommend" @click.native='changeCurrentIndex(1)'>推荐</router-link>
					<router-link :class="currentIndex==2?'navSon navSonSelect':'navSon'" to="/index/indexAttention" @click.native='changeCurrentIndex(2)'>关注</router-link>
					<router-link :class="currentIndex==3?'navSon navSonSelect':'navSon'" to="/index/indexRank" @click.native='changeCurrentIndex(3)'>排行</router-link>
				</div>
				<keep-alive>
					<router-view name="indexLeft"></router-view>
				</keep-alive>
			</div>
		</div>
		<div id="right">
			<div ref="right">
				<div id="rightSon1">
					<attentionWriter title="关注"></attentionWriter>
				</div>
				<div class="rightSon2">
					<attentionWriter title="粉丝"></attentionWriter>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import attentionWriter from './index/attentionWriter.vue'
	export default {
		data(){
			return {
				currentIndex: 1
			}
		},
		components: {
			attentionWriter
		},
		methods:{
			changeCurrentIndex(e){
				this.$store.commit({
					type: "changeCurrentIndex",
					data: e
				})
			},
			handle() {
				let rightBoxHeight = this.$refs.right.offsetHeight
				let rightBoxY = this.$refs.right.getBoundingClientRect().y
				let allY = this.$refs.right.parentElement.parentElement.getBoundingClientRect().y
				if(rightBoxHeight > window.innerHeight) {
					if (rightBoxY <= window.innerHeight - rightBoxHeight - 16) {
						this.$refs.right.style.position = "fixed"
						this.$refs.right.style.bottom = "16px"
						// this.$refs.right.style.width = "304px"
					}
					if (allY >= window.innerHeight - rightBoxHeight - 32) {
						this.$refs.right.style.position = "relative"
						this.$refs.right.style.bottom = "0"
					}
				}else{
					this.$refs.right.style.position = "fixed"
					this.$refs.right.style.top = "63px"
				}
			}
		},
		watch: {
			'$store.state.currentIndex'(e) {
				this.currentIndex = e
			}
		},
		mounted() {
			window.addEventListener("scroll", this.handle)
			this.$store.commit({
				type: "changeBanner",
				data: true
			})
		},
		beforeDestroy() {
			// 需要移除监听，否则在另外的页面会继续监听并且报错
			// 取消监听，需要使用实名函数
			window.removeEventListener("scroll",this.handle)
		}
	}
</script>

<style>
	#indexAll {
		width: 960px;
		margin: auto;
		display: flex;
		justify-content: space-between;
		padding-bottom: 16px;
	}

	#indexAll #left,
	#indexAll #right #rightSon1,
	#indexAll #right .rightSon2 {
		margin-top: 16px;
		background-color: #FFFFFF;
		box-shadow: 2px 2px 5px rgba(32, 32, 32, .3);
		border-radius: 8px;
	}

	#indexAll #left {
		width: 640px;
	}

	#indexAll #right {
		width: 304px;
	}

	#indexAll #left #indexNav {
		height: 58px;
		line-height: 58px;
		border-bottom: 1px solid #EEEEEE;
	}

	#indexAll #left #indexNav .navSon {
		color: black;
		text-decoration: none;
		margin: 0 16px;
		user-select: none;
	}
	
	#indexAll #left #indexNav .navSonSelect {
		font-weight: bold;
	}

	#indexAll #left #indexNav .navSon:hover {
		font-weight: bold;
	}
</style>
